<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EDA指标分析</title>

    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>

    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>

    <!-- Axios for HTTP requests -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- Chart.js for data visualization -->
    <script src="https://unpkg.com/chart.js"></script>

    <script src="../js/menu-config.js"></script>
    <script src="../js/common-header.js"></script>
    <script src="../js/icons.js"></script>

    <!-- 引用外部样式表 -->
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/analysis-common.css">
    <link rel="stylesheet" href="../css/eda-analysis.css">
</head>

<body>
    <div id="app" class="layout-container">
        <div id="header-container"></div>

        <!-- 主体内容区 -->
        <div class="main-container">
            <!-- 左侧菜单栏 -->
            <aside class="sidebar" :class="{ collapsed: sidebarCollapsed, show: sidebarShow }">
                <div class="sidebar-content">
                    <ul class="nav-menu" id="nav-menu">
                        <!-- 菜单项将通过JavaScript动态生成 -->
                    </ul>
                </div>
            </aside>

            <!-- 右侧内容区 -->
            <main class="content-area">
                <!-- 面包屑导航 -->
                <div class="breadcrumb-container">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item><a href="../index.html">首页</a></el-breadcrumb-item>
                        <el-breadcrumb-item>EDA指标分析</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <!-- 页面标题 -->
                <div class="page-header">
                    <h1 class="page-title">EDA指标分析</h1>
                    <p class="page-description">皮肤电导活动分析与情绪状态评估</p>
                </div>

                <!-- 文件管理区域 -->
                <div class="content-card">
                    <div class="card-header">
                        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                            <h2>
                                <el-icon>
                                    <Folder />
                                </el-icon>
                                文件列表 ({{ fileList.length }})
                            </h2>
                            <div style="display: flex; gap: 8px;">
                                <el-button type="primary" size="small" @click="triggerFileUpload" :icon="Upload">
                                    上传文件
                                </el-button>
                                <el-button size="small" type="danger" :disabled="fileList.length === 0"
                                    @click="clearAllFiles">
                                    清空所有
                                </el-button>
                            </div>
                            <input ref="fileInput" type="file" multiple accept=".txt,.csv" @change="handleFileSelect"
                                style="display: none;">
                        </div>
                    </div>
                    <div class="card-body">

                        <!-- 文件上传区域 -->
                        <div v-if="fileList.length === 0" class="upload-area" :class="{ dragover: isDragOver }"
                            @drop="handleDrop" @dragover.prevent="isDragOver = true" @dragleave="isDragOver = false"
                            @click="triggerFileUpload">
                            <el-icon size="48" color="#c0c4cc"><upload-filled /></el-icon>
                            <div style="margin-top: 16px; font-size: 16px; color: #606266;">
                                将EDA数据文件拖到此处，或<em style="color: #2F54EB;">点击上传</em>
                            </div>
                            <div style="margin-top: 8px; font-size: 14px; color: #909399;">
                                支持 .txt 和 .csv 格式文件，可批量选择
                            </div>
                        </div>

                        <!-- 文件列表表格 -->
                        <div v-if="fileList.length > 0" class="file-list-table">
                            <el-table :data="fileList" style="width: 100%">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="name" label="文件名" min-width="200">
                                    <template #default="scope">
                                        <el-tooltip :content="scope.row.name" placement="top">
                                            <span>{{ scope.row.name }}</span>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="size" label="文件大小" width="120">
                                    <template #default="scope">
                                        {{ formatFileSize(scope.row.size) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="状态" width="150">
                                    <template #default="scope">
                                        <div class="progress-indicator">
                                            <el-tag :type="getStatusType(scope.row.status)" size="small">
                                                {{ getStatusText(scope.row.status) }}
                                            </el-tag>
                                            <el-progress v-if="scope.row.status === 'analyzing'"
                                                :percentage="scope.row.progress || 0" :show-text="false"
                                                class="analysis-progress">
                                            </el-progress>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100">
                                    <template #default="scope">
                                        <el-button type="danger" size="small" :icon="Delete"
                                            @click="removeFile(scope.$index)" :disabled="isAnalyzing">
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>

                <!-- 分析控制和日志面板 -->
                <div class="cards-row">
                    <!-- 分析控制面板 -->
                    <div class="card-half">
                        <div class="content-card">
                            <el-card>
                                <template #header>
                                    <div style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>分析控制</span>
                                        <el-icon><Setting /></el-icon>
                                    </div>
                                </template>

                                <div class="analysis-control-panel">
                                    <!-- 开始分析按钮 -->
                                    <div class="control-section">
                                        <div class="start-analysis-section">
                                            <el-button type="primary" size="large" @click="startBatchAnalysis" 
                                                :loading="isAnalyzing" :disabled="fileList.length === 0 || isAnalyzing"
                                                :icon="VideoPlay">
                                                {{ isAnalyzing ? '分析中...' : '开始分析' }}
                                            </el-button>
                                            <div style="margin-top: 8px; font-size: 12px; color: #909399;">
                                                {{ fileList.length > 0 ? `准备分析 ${fileList.length} 个文件` : '请先上传文件' }}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 采样率设置 -->
                                    <div class="control-section">
                                        <label class="control-label">采样率设置</label>
                                        <el-select v-model="analysisConfig.sampleRate" placeholder="选择采样率" style="width: 100%;">
                                            <el-option label="4 Hz" :value="4"></el-option>
                                            <el-option label="8 Hz" :value="8"></el-option>
                                            <el-option label="16 Hz" :value="16"></el-option>
                                            <el-option label="32 Hz" :value="32"></el-option>
                                            <el-option label="64 Hz" :value="64"></el-option>
                                        </el-select>
                                        <div style="margin-top: 4px; font-size: 12px; color: #909399;">
                                            当前设置: {{ analysisConfig.sampleRate }} Hz
                                        </div>
                                    </div>

                                    <!-- EDA算法选择 -->
                                    <div class="control-section">
                                        <label class="control-label">EDA算法选择</label>
                                        <div class="algorithm-container">
                                            <el-radio-group v-model="analysisConfig.algorithm" class="algorithm-radio-group">
                                                <el-radio label="custom" class="algorithm-radio">
                                                    <div class="algorithm-option">
                                                        <div class="algorithm-name">
                                                            Custom算法 (默认)
                                                            <i class="el-icon-question algorithm-help-icon" 
                                                               title="团队改进的EDA处理算法，适合常规皮肤电导与质量评估"></i>
                                                        </div>
                                                    </div>
                                                </el-radio>
                                                <el-radio label="neurokit2" class="algorithm-radio">
                                                    <div class="algorithm-option">
                                                        <div class="algorithm-name">
                                                            NeuroKit2
                                                            <i class="el-icon-question algorithm-help-icon" 
                                                               title="基于NeuroKit2库的标准EDA处理方法"></i>
                                                        </div>
                                                    </div>
                                                </el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>

                    <!-- 分析日志面板 -->
                    <div class="card-half">
                        <div class="content-card">
                            <el-card>
                                <template #header>
                                    <div style="display: flex; justify-content: space-between; align-items: center;">
                                        <span>分析日志</span>
                                        <div>
                                            <el-button size="small" @click="clearLogs" :disabled="analysisLogs.length === 0">
                                                清空日志
                                            </el-button>
                                            <el-button size="small" @click="logPanelCollapsed = !logPanelCollapsed">
                                                {{ logPanelCollapsed ? '展开' : '折叠' }}
                                            </el-button>
                                        </div>
                                    </div>
                                </template>

                                <el-collapse-transition>
                                    <div v-show="!logPanelCollapsed" style="flex: 1; display: flex; flex-direction: column;">
                                        <div class="log-content" ref="logContainer">
                                            <div v-if="analysisLogs.length === 0"
                                                style="color: #909399; text-align: center; padding: 20px;">
                                                等待分析...
                                            </div>
                                            <div v-for="(log, index) in analysisLogs" :key="index" class="log-entry"
                                                :class="getLogClass(log.type)">
                                                [{{ log.timestamp }}] {{ log.message }}
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-transition>
                            </el-card>
                        </div>
                    </div>
                </div>

                <!-- 结果展示区域 -->
                <div v-if="analysisResults.length > 0" class="results-section">
                    <el-card>
                        <template #header>
                            <div class="results-toolbar">
                                <span>分析结果 ({{ analysisResults.length }} 个文件)</span>
                                <div class="export-options">
                                    <div class="column-manager">
                                        <el-button size="small" :icon="Setting" @click="showColumnManager = true">
                                            列管理
                                        </el-button>
                                    </div>
                                    <el-dropdown @command="exportResults">
                                        <el-button size="small" type="default">
                                            导出结果<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                        </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item command="csv">导出为 CSV</el-dropdown-item>
                                                <el-dropdown-item command="excel">导出为 Excel</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </div>
                        </template>

                        <!-- 指标表格 -->
                        <el-table :data="analysisResults" class="metrics-table"
                            :default-sort="{ prop: 'fileName', order: 'ascending' }" @sort-change="handleSortChange">

                            <el-table-column v-for="column in visibleColumns" :key="column.prop" :prop="column.prop"
                                :label="column.label" :width="column.width" :min-width="column.minWidth"
                                :sortable="column.sortable" :formatter="column.formatter">
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>

                <!-- 列管理对话框 -->
                <el-dialog v-model="showColumnManager" title="列显示管理" width="500px">
                    <div style="max-height: 500px; overflow-y: auto;">
                        <!-- 按分类显示列选择 -->
                        <div v-for="(columns, category) in columnsByCategory" :key="category" style="margin-bottom: 20px;">
                            <div style="margin-bottom: 10px; border-bottom: 1px solid #e4e7ed; padding-bottom: 8px;">
                                <el-checkbox 
                                    :model-value="isCategoryFullySelected(category)"
                                    :indeterminate="isCategoryIndeterminate(category)"
                                    @change="toggleCategoryColumns(category, $event)"
                                    style="font-weight: bold; color: #409eff;">
                                    {{ categoryNames[category] }}
                                </el-checkbox>
                            </div>
                            <div style="padding-left: 20px;">
                                <el-checkbox-group v-model="selectedColumns">
                                    <div v-for="column in columns" :key="column.prop" style="margin-bottom: 6px;">
                                        <el-checkbox :label="column.prop">{{ column.label }}</el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="resetColumns">重置</el-button>
                            <el-button type="primary" @click="applyColumnSettings">确定</el-button>
                        </span>
                    </template>
                </el-dialog>
            </main>
        </div>
    </div>

    <!-- 引入外部JavaScript文件 -->
    <script src="../js/eda-analysis.js"></script>
    <script>
        // 初始化EDA分析应用
        document.addEventListener('DOMContentLoaded', function() {
            initEDAAnalysisApp();
        });
    </script>
</body>

</html>
</body>

</html>